<template>
  <div>
    <!-- 表单 -->
    <!-- v-model="" -->
    <el-input :placeholder="roleName" size="small" class="mb-20" disabled></el-input>

    <el-tree :data="data" show-checkbox default-expand-all node-key="id" ref="tree" highlight-current :props="defaultProps">
    </el-tree>

    <!-- 按钮区域 -->
    <div class="mt-20">
      <el-button type="primary" size="small" @click="save">保存</el-button>
      <el-button type="default" size="small" @click="backToRole">取消</el-button>
    </div>
  </div>
</template>

<script>
// 导入api
import toAssignApi from '@/api/acl/permission'
export default {
  name: 'VRoleAuth',
  data: () => {
    return {
      // roleName: '',
      data: [],
      defaultProps: {
        children: 'children',
        label: 'name'
      }
    }
  },
  // 所有的方法都写在这里
  methods: {
    // 定义一个方法,在挂载完成的钩子函数中进行调用,用于获取到角色的权限列表
    async getToAssIgnList() {
      // 获取到当前路由中携带的id参数
      const roleId = this.$route.query.id
      // console.log(roleId)
      // 根据id来发送请求
      const result = await toAssignApi.toAssign(roleId)
      this.data = result.data.children
      const checkedIds = this.getCheckedIds(this.data)
      this.$refs.tree.setCheckedKeys(checkedIds)
    },

    /* 
  得到所有选中的id列表
  只用得到所有选中的按钮权限数据的id
  */
    getCheckedIds(auths, initArr = []) {
      // console.log(auths)
      auths.forEach((item) => {
        if (item.select && item.level === 4) {
          initArr.push(item.id)
        } else if (item.select && item.level === 3) {
          initArr.push(item.id)
        } else if (item.children) {
          this.getCheckedIds(item.children, initArr)
        }
      })
      return initArr
    },

    // ---------------------------------------------------------- 保存取消按钮
    // 取消按钮
    backToRole() {
      // 点击取消返回上一级路由页面
      // 跳转到角色列表
      router.replace('/acl/role/list')
    },

    // 保存按钮
    async save() {
      // 获取全选的id
      const checkedAll = this.$refs.tree.getCheckedKeys()
      // 半选
      const banCheckedId = this.$refs.tree.getHalfCheckedKeys()

      // 组装并连接成字符串
      let ids = checkedAll.concat(banCheckedId).join(',')
      // 获取到当前路由中携带的id参数
      const roleId = this.$route.query.id
      // console.log(ids)
      const result = await toAssignApi.doAssign(roleId, ids)
      if (result.code === 20000) {
        // 提示用户
        this.$message({
          message: '分配权限成功',
          type: 'success'
        })
        // 执行跳转 -- 返回上一级路由
        this.$router.replace('/acl/role/list')
      }
    }
  },
  computed: {
    roleName() {
      return this.$route.query.roleName
    }
  },
  mounted() {
    // console.log(this.$refs.tree)
    this.getToAssIgnList()
  }
}
</script>

<style lang="sass" scoped></style>
